<template>
	<view class="bigbox">
		<view class="header">
			<view class="money">
				{{money}}元
			</view>
			<view class="finish">
				交易完成
			</view>
		</view>
		<view class="center">
			<view class="title">
				<view class="t-h1">
					<view class="t-h1-1">
						持有产品
					</view>
					<view class="t-h1-2">
						{{name}}
					</view>
				</view>
				<view class="t-h2">
					<view class="t-h2-l">
						小雨点财富密码
					</view>
					<view class="t-h2-r">
						{{money}}元
					</view>
				</view>
				<view class="t-h3">
					<view class="t-h3-1">
						交易说明
					</view>
					<view class="t-h3-2">
						收益到账
					</view>
				</view>
			</view>
		</view>
		<view class="buttom">
			<view class="b-h1">
				<view class="b-h1-1">
					交易时间
				</view>
				<view class="b-h1-2">
					2021-3-21 04:57:12
				</view>
			</view>
			<view class="b-h1">
				<view class="b-h1-1">
					交易单号
				</view>
				<view class="b-h1-2">
					{{dindanhao}}
				</view>
					
	
				<view class="fuzhi" @tap="copy()">
					复制
				</view>
				
			</view>
		</view>
		<view class="jiesu">
			联系客服
		</view>
	</view>
</template>


<script>
	// 这是引用复制的js
	import Copy from '../../utils/xb-copy/uni-copy.js'
	
	export default {
		data() {
			return {
				name:"",
				money:"",
				dindanhao:"123456798"
			}
		},
		onLoad(options) {
			console.log(options)
			this.name=options.name
			this.money=options.money
		},
		methods: {
			// 这是复制的方法
			copy() {
				Copy({
					content:this.dindanhao,
					success:(res)=>{
						uni.showToast({
							title: res,
							icon: 'none'
						})
					},
					error:(e)=>{
						uni.showToast({
							title: e,
							icon: 'none',
							duration:3000,
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
.bigbox{
	width: 750rpx;
	height: 100vh;
	background-color: #F4F4F4;
}
.header{
	width: 750rpx;
	margin: 0 auto;
	height: 290rpx;
	background-color: white;
	margin-bottom: 20rpx;
}
.money{
	text-align: center;
	margin: 0 auto;
	font-size: 120rpx;
	font-weight: bolder;
	height: 210rpx;
	line-height: 250rpx;
}
.finish{
	text-align: center;
	margin: 0 auto;
	font-size: 32rpx;
	font-weight: bold;
	color: gray;
}
.title{
	background-color: white;
	width: 750rpx;
	height: 290rpx;
	margin: 0 auto;
	padding: 40rpx;
	padding-left:25rpx;
	padding-right: 25rpx;
	box-sizing: border-box;
	margin-bottom: 20rpx;
}
.t-h1{
	width: 750rpx;
	height: 50rpx;
	display: flex;
	margin-bottom: 20rpx;
}
.t-h1-1{
	color:#DADADA;
	font-size: 28rpx;
}
.t-h1-2{
	color: #161616;
	font-size: 28rpx;
	margin-left: 30rpx;
}
.t-h2{
	width: 700rpx;
	height: 80rpx;
	background-color: #F9F9F9;
	display: flex;
	padding-left: 25rpx;
	padding-right: 25rpx;
	box-sizing: border-box;
	justify-content: space-between;
	margin-bottom: 20rpx;
}
.t-h2-l{
	color: #DADADA;
	font-size: 24rpx;
	line-height: 80rpx;
}
.t-h2-r{
	color: #B8B8B8;
	font-size: 24rpx;
	line-height: 80rpx;
}
.t-h3{
	
	height:80rpx;
	display: flex;
}
.t-h3-1{
	color: #B8B8B8;
	font-size: 28rpx;
	
}
.t-h3-2{
	color: #B8B8B8;
	font-size: 28rpx;
	margin-left: 30rpx;
}
.buttom{
	background-color: white;
	width: 750rpx;
	height: 150rpx;
	padding: 25rpx;
	margin-bottom: 50rpx;
}
.b-h1{
	display: flex;
	color: #B8B8B8;
	font-size: 28rpx;
	margin-bottom: 10rpx;
	line-height: 50rpx;
	height: 50rpx;
}
.b-h1-2{
	margin-left: 30rpx;
}
.fuzhi{
	text-align: center;
	width: 80rpx;
	height: 50rpx;
	line-height: 50rpx;
	font-size: 28rpx;
	color: #B8B8B8;
	margin-left: 60rpx;
	border: 1rpx solid #B8B8B8;
}
.jiesu{
	text-align: center;
	color: #C6C7C9;
}
</style>
